<template>
  <div>
    <div class="blog-containe">
      <div
        v-for="(item, index) in dataPage"
        :key="index"
        class="blog-item"
        @click="toInfo(item.blogId)"
      >
        <!-- <div class="left">
          <img :src="item.blogImage" />
        </div> -->
        <div class="right">
          <div class="title">{{ item.blogTitle }}</div>
          <div class="remark">
            {{ item.blogRemark }}
          </div>
          <div class="bottom">
            <div class="right-bottom">
                <div class="type">
              分类：<el-tag type="success">{{ item.typeName }}</el-tag>
            </div>
            <div class="tag">
              文章标签：<span v-for="(a, i) in item.tagNameList" :key="i">
                <el-tag type="success" class="articleTag">{{ a }}</el-tag>
              </span>
            </div>
            </div>
            
            <div class="meta">
              <div class="time">{{ item.createdTime }}</div>
              <div class="meta-container">
                <span class="meta-item"
                  ><i class="el-icon-view" />阅读:{{ item.blogRead }}
                </span>
                <span class="meta-item"
                  ><i class="el-icon-star-off" />收藏:{{ item.blogCollection }}
                </span>
                <span class="meta-item"
                  ><i class="el-icon-lollipop" />点赞:{{ item.blogGoods }}
                </span>
                <span class="meta-item"
                  ><i class="el-icon-chat-round" />评论:{{
                    item.blogComment
                  }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        class="pageable-container"
        background
        :current-page="params.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getByPage } from "@/api/blog";
export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
        // 排序列
        sortColumn: "created_time",
      },
      // 查询结果分页对象
      dataPage: {},
      //blogImg: require("@/assets/springboot.jpg"),
      currentPage: 1,
      // 总条数
      count: 0,
    };
  },
  watch: {
    // 通过getters 从state获取改变后的值
    "$store.getters.searchText": {
      immediate: true,
      handler: function (newVal) {
        this.params.blogTitle = newVal;
        this.getByPage();
      },
    },
  },
  created() {
    this.getByPage();
  },
  methods: {
    // 每页条数改变时
    handleSizeChange(val) {
      this.params.limit = val;
      this.getByPage();
    },

    // 每页改变时
    handleCurrentChange(val) {
      this.params.page = val;
      this.getByPage();
    },

    // 分页查询
    getByPage() {
      getByPage(this.params).then((res) => {
        this.dataPage = res.data;
        this.count = parseInt(res.count);
      });
    },

    // 重新设置排序方式
    setSort(sort) {
      this.params.sortColumn = sort;
      this.getByPage();
    },

    // 跳转到详情
    toInfo(id) {
      this.$router.push("/blogInfo/" + id);
    },
  },
};
</script>

<style src="./blog-list.css" scoped>
</style>
